<script setup lang="ts">
import '@/assets/iconfont/iconfont.css'
const props = defineProps<{
  history:string[]
}>()
console.log(props.history)
const emit = defineEmits(['onDelete','onClickHistory'])

</script>

<template>
  <div class="top">
    <div class="title">
      历史搜索
    </div>
    <van-icon name="delete-o" color="#fff" size="5vw" @click="emit('onDelete')"/>
  </div>

  <div class="list">
    <span class="item" v-for="item in history" :key="item" @click="emit('onClickHistory',item)"> {{ item }}</span>
    <!-- 这里暂时做不了那种效果，就排布吧 -->
    <!-- <span class="iconfont icon-angle-up-l icon" /> -->
  </div>
</template>

<style lang="scss" scoped>
.top {
  padding: 0 3vw;
  background-color: transparent;
  width: 100%;
  height: 10vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  color: #fff;
  font-size: 4vw;
}

.list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 100%;
}

.item {
  color: #fff;
  display: inline-block;
  font-size: 4vw;
  background-color: #303030;
  padding: 1vw 3vw;
  margin: 0 2vw;
  border-radius: 5vw;
  margin-bottom: 3vw;
}

// .icon {
//   display: inline-block;
//   font-size: 4vw;
//   color: #fff;
//   height: 10vw;
//   width: 14vw;
//   border-radius: 5vw;
//   padding: 1vw 3vw;
//   background-color: #303030;
//   line-height: 8vw;
//   text-align: center;
//   position: relative;
//   right: 10vw;
//   top:0;
//   bottom: 0;
// }
</style>